<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户数据列表</title>
		<!--引入Vue.js-->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<style type="text/css">
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<el-row type="flex" justify="center">
				<h1>{{sysName}}</h1>
			</el-row>
			<el-row type="flex" justify="end">
				<el-button @click="addUser()" type="primary" icon="el-icon-circle-plus-outline">新增</el-button>
			</el-row>
			<el-row>
			  <el-table :data="userList" border style="width: 100%;">
			    <el-table-column fixed prop="id" label="ID" align="center"></el-table-column>
			    <el-table-column fixed prop="name" label="姓名" align="center"></el-table-column>
			    <el-table-column fixed prop="age" label="年龄" align="center"></el-table-column>
			    <el-table-column fixed prop="sex" label="性别" align="center"></el-table-column>
			    <el-table-column label="操作" width="220" align="center">
			      <template slot-scope="scope">
			        <el-button @click="updateUser(scope.$index,scope.row)" type="success" icon="el-icon-edit">修改</el-button>
			        <el-button @click="deleteUser(scope.$index,scope.row)" type="danger" icon="el-icon-delete">删除</el-button>
			      </template>
			    </el-table-column>
			  </el-table>
			</el-row>
			
			<el-dialog title="修改个人信息" :visible.sync="dialogFormVisible">
			  <el-form :model="userData">
			    <el-form-item label="ID：" >
			      <el-input v-model="userData.id" autocomplete="off" :disabled="true" ></el-input>
			    </el-form-item>
			    <el-form-item label="姓名：" >
			      <el-input v-model="userData.name" autocomplete="off"></el-input>
			    </el-form-item>
				<el-form-item label="年龄：" >
				  <el-input v-model="userData.age" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="性别：" >
				  <el-input v-model="userData.sex" autocomplete="off"></el-input>
				</el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="dialogFormVisible = false">取 消</el-button>
			    <el-button type="primary" @click="submit()">确 定</el-button>
			  </div>
			</el-dialog>
			
		</div>
	</body>
	<script>
		axios.defaults.baseURL="http://localhost:8080/"
	
		const app=new Vue({
			el:"#app",
			data:{
				sysName:'用户数据列表',
				userList:[],
				isUpdate:false,
				dialogFormVisible: false,
				userData: {
				    id:'',
					name:'',
					age:'',
					sex:'',
				}
			},
			methods:{
				async getResult(){
					const{data: value} = await axios.get('findAll')
					this.userList = value
					console.log(value)
				},
				addUser(){
					this.dialogFormVisible=true
					this.userData={}
					this.isUpdate=false
				},
				updateUser(index,row){
					this.userData=JSON.parse(JSON.stringify(row))
					this.dialogFormVisible = true
					this.isUpdate=true
				},
				deleteUser(index,row){
					this.userData=JSON.parse(JSON.stringify(row))
					axios.delete('deleteUser', {
						params:{
							id: app.userData.id,
						}
					})
					.then(function () {
						location.reload()
						app.dialogFormVisible=false
					})
					.catch(function (error) {
						console.log(error);
					})
					alert("删除成功")
				},
				submit(){
					if(!this.isUpdate){
						axios.post('addUser', app.userData)
						.then(function () {
							location.reload()
							app.dialogFormVisible=false
						})
						.catch(function (error) {
							console.log(error);
						})
					}else{
						axios.put('updateUser', app.userData)
						.then(function () {
							location.reload()
							app.dialogFormVisible=false
						})
						.catch(function (error) {
							console.log(error);
						})
					}
				},
				
			},
			mounted(){
				this.getResult()
			}

			
		})
		

	</script>
</html>
